<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <font-awesome-icon icon="fa-solid fa-angle-left" onclick="history.go(-1)" />
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul>
            <li v-for="(order, index) in orderList" :key="index">
                <div class="left">
                    <p>{{ order.orderDate }}</p>
                    <p>{{ order.setmealName }}</p>
                </div>

                <!-- <el-button plain @click="showOrder(order.hpId,order.smId,order.orderDate,order.state)" v-show="order.state == 1">
                    未支付
                </el-button>

                <el-button plain @click="showOrder(order.hpId,order.smId,order.orderDate,order.state)" v-show="order.state == 2">
                    已支付
                </el-button>

                <el-button plain @click="showOrder(order.hpId,order.smId,order.orderDate,order.state)" v-show="order.state == 4">
                    已支付
                </el-button>

                <el-button plain @click="showOrder(order.hpId,order.smId,order.orderDate,order.state)" v-show="order.state == 6">
                    已取消
                </el-button> -->
                <el-button plain @click="showOrder(order.hpId,order.smId,order.orderDate,order.state)" >
                    {{buttonText(order.state)}}
                </el-button>

            </li>
        </ul>

        <div class="bottom-ban"></div>
        <Footer></Footer>

        <el-dialog v-model="dialogVisible" title="订单信息" width="500" :before-close="handleClose">
            <section>
                <div class="title">
                    <p>体检人信息</p>
                </div>
                <table>
                    <tr>
                        <td>姓名:</td>
                        <td>{{ confirmOrder.user.realName }}</td>
                    </tr>
                    <tr>
                        <td>证件号码:</td>
                        <td>{{ confirmOrder.user.identityCard }}</td>
                    </tr>
                    <tr>
                        <td>出生日期:</td>
                        <td>{{ confirmOrder.user.birthday }}</td>
                    </tr>
                    <tr>
                        <td>手机号码:</td>
                        <td>{{ confirmOrder.user.userId }}</td>
                    </tr>
                </table>
                <div class="title">
                    <p>体检日期</p>
                </div>
                <table>
                    <tr>
                        <td>{{ confirmOrder.orderDate }}</td>
                    </tr>
                </table>
                <div class="title">
                    <p>体检机构</p>
                </div>
                <table>
                    <tr>
                        <td colspan="2">{{ confirmOrder.hospital.name }}</td>
                    </tr>
                    <tr>
                        <td>营业时间:</td>
                        <td>{{ confirmOrder.hospital.businessHours }}</td>
                    </tr>
                    <tr>
                        <td>采血截止:</td>
                        <td>{{ confirmOrder.hospital.deadline }}</td>
                    </tr>
                    <tr>
                        <td>机构电话:</td>
                        <td>{{ confirmOrder.hospital.telephone }}</td>
                    </tr>
                    <tr>
                        <td>机构地址:</td>
                        <td>{{ confirmOrder.hospital.address }}</td>
                    </tr>
                </table>
                <div class="title">
                    <p>套餐类型</p>
                </div>
                <table>
                    <tr>
                        <td>{{ confirmOrder.setMeal.name }}</td>
                    </tr>
                </table>
            </section>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="toAppointmentCancel" v-show="(confirmOrder.state==1||confirmOrder.state==2)">取消订单</el-button>
                    <el-button type="primary" @click="toConfirmOrder(confirmOrder.hpId, confirmOrder.smId, confirmOrder.orderDate)" v-show="confirmOrder.state==1">
                        支付订单
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import Footer from '@/components/Footer.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import axios from "../plugin/axiosInstance";
import { reactive, ref } from 'vue';

const orderList = reactive([]);
const confirmOrder = reactive({
    hpId: null,
    orderDate: null,
    smId: null,
    userId: 0,
    orderId: 0,
    hospital: {},
    user: {},
    setMeal: {},
    state:0,
})

const buttonText=(state)=>{
    switch(state){
        case 1:
            return '待支付';
        case 2:
            return '已支付';
        case 3:
            return '进行中';
        case 4:
            return '已归档';
        case 6:
            return '已取消';
    }
}


// http请求获取订单信息
const getconfirmOrder = () => {
    axios.post("/order/placeOrder", {
        hpId: confirmOrder.hpId,
        smId: confirmOrder.smId,
        orderDate: confirmOrder.orderDate
    }).then(res => {
        if (res.data.code == 200) {
            confirmOrder.hospital = res.data.data.hospital;
            confirmOrder.user = res.data.data.users;
            confirmOrder.setMeal = res.data.data.setmealVo;
            confirmOrder.orderId = res.data.data.orderId;
        }
    })
}

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    /* ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        }) */
    done();
}

// 显示订单信息
const showOrder=(hpId,smId,orderDate,state)=>{
    confirmOrder.hpId = hpId;
    confirmOrder.smId = smId;
    confirmOrder.orderDate = orderDate;
    confirmOrder.state = state;
    getconfirmOrder();
    dialogVisible.value = true;
}

// 获取订单列表
const getOrderList = () => {
    axios.get("/order/selectOrder",).then(res => {
        if (res.data.code == 200) {
            const orders = res.data.data;
            orderList.splice(0, orderList.length);
            orders.forEach(order => orderList.push(order));
            console.log(orderList[0]?.setmealName);
        }
    }).catch(err => {

    });
}

// 取消订单
const toAppointmentCancel = () => {
    ElMessageBox.confirm(
        '您确定要取消订单吗?',
        'Warning',
        {
            confirmButtonText: '是的',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            dialogVisible.value = false;
            axios.post("/order/cancel", {
                orderId: confirmOrder.orderId
            }).then(res => {
                if (res.data.code == 200) {
                    router.push("/appointmentCancel");
                }else{
                    ElMessage({
                        type: 'error',
                        message: '取消订单失败',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'success',
                message: '已取消操作',
            })
        })

}

// 去支付订单
const toConfirmOrder = (hpId, smId, orderDate) => {
    dialogVisible.value = false;
    router.push({ path: "/confirmOrder", query: { hpId: hpId, smId: smId, orderDate } })
}
const init = () => {
    getOrderList();
}

init();
</script>

<style scoped>
@import "../assets/css/appointmentlist.css";
</style>